<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <a-col :span="24">
        <a-card :title="$ct('DefaultParamConfig','默认参数配置')" style="width: 100%">
          <a slot="extra" @click="handleEdit">{{$ct("edit","修改")}}</a>
          <a-table :columns="columns" :data-source="tableData" :pagination="false" :loading="tableLoading"
                   size="small" rowKey='key'>
            <template slot="label" slot-scope="record,scope,index">
              {{$ct(tableData[index].langCode,tableData[index].label)}}
            </template>
          </a-table>
        </a-card>
      </a-col>
      <edit-form ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl"
                 @cancel="handleCancel()" @ok="handleOk"/>
    </div>
  </div>
</template>
<script>
  import editForm from "./edit.vue";

  export default {
    data() {
      return {
        tableData: [
          {name: 'packageName', value: '', label: '默认包名', key: '1',langCode:'defaultPackageName'},
          {name: 'moduleName', value: '', label: '系统模块', key: '2',langCode:'systemModule'},
          {name: 'author', value: '', label: '默认作者', key: '3',langCode:'defaultAuthor'},
          {name: 'mailbox', value: '', label: '作者邮箱', key: '4',langCode:'authorEmail'},
          {name: 'version', value: '', label: '默认版本号', key: '5',langCode:'defaultVersionNumber'},
        ],
        columns: [
          {
            title: '',
            dataIndex: 'label',
            width: '20%',
            scopedSlots: {
              customRender: "label"
            },
          },
          {
            title: '',
            dataIndex: 'value',
          },
        ],
        tableLoading: false,
        confirmLoading: false,
        visible: false,
        mdl: {},
        modelData: null,
        getDataUrl: '/system/sysGenBase/selectAll',
        editUrl: '/system/sysGenBase/update',
      }
    },
    components: {
      editForm
    },
    created() {
      this.getData()
    },
    methods: {
      //获取数据
      getData() {
        this.tableLoading = true
        this.$post(this.getDataUrl).then((res) => {
          if (res) {
            this.visible = false
            // 刷新表格
            // this.$refs.table.refresh()
            this.modelData = JSON.parse(JSON.stringify(res))
            this.tableData = this.tableData.map(item => {
              item.value = res[item.name]
              return item
            })
            // this.$message.success(res.message || '操作成功', 1.5)
          } else {
            this.$message.success(res.message || '获取数据失败', 1.5)
          }
        }).finally(() => {
          this.tableLoading = false
        })
      },
      handleCancel() {
        // this.$refs.createModal.form.resetFields()
        this.visible = false;
        this.mdl = {}
      },
      handleOk: function () {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          let fromValue = {
            ...values,
          }
          if (!errors) {
            this.$post(this.editUrl, fromValue).then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.visible = false
                // 刷新表格
                this.getData()
                this.$message.success(res.message || '操作成功', 1.5)
              } else {
                this.$message.success(res.message || '操作失败', 1.5)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleEdit() {
        this.mdl = this.modelData
        this.visible = true
      }
    }

  }
</script>
<style lang="less" scoped>
  /deep/ .ant-table-thead {
    display: none;
  }

  /deep/ .ant-table-tbody > tr > td {
    border: none;
  }
</style>
